<template>
	<div class="archive">
		<div class="count">{{this.$route.params.name || $t('header.archive')}}：{{Questions.length}}{{$t('archive.article')}}</div>
		<el-timeline>
			<el-timeline-item v-for="activity in Questions"  :color="activity.color" :timestamp="dateFormat(activity.createTime)" placement="top" @mouseenter="hoverLine(activity)">
				<div class="line-item">
					<router-link :to="{name:'article',params :{id :activity.id}}" tag="span">{{activity.title}}</router-link>
				</div>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>

<script>
	import {getTimeLine} from "../api";

	export default {
		name: 'archive',
		data() {
			return {
				activities: [{
					content: 'springBoot整合Redis',
					timestamp: '2018-04-15'
				}, {
					content: 'Activiti工作流',
					timestamp: '2018-04-13'
				}, {
					content: 'Vue路由',
					timestamp: '2018-04-11'
				}],
				Questions:[
					{
						description:'',
						id:'',
						createTime:''
					}
				]
			};
		},
		methods: {
			hoverLine(activity) {
				activity.color = "#409eff"
			},
			dateFormat: function (time) {
				var date = new Date(time);
				var year = date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " / " + hours + ":" + minutes + ":" + seconds;
			},
		},
		mounted() {
			getTimeLine().then(res=>{
				console.log(res)
				this.Questions=res.data.Questionlist;
			})
		}
	}
</script>

<style scoped>
	.line-item {
		display: inline-block;
	}

	.line-item:hover {
		cursor: pointer;
		color: #409EFF;
	}

	.count {
		margin-bottom: 20px;
		font-size: 20px;
		color: #E6A23C;
	}
</style>
